import React from 'react';
import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space, Modal } from 'antd';
import { Select } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';
import { Table } from 'antd';
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import request from '../../../http';
import Xinzheng from '../course/xinzheng';
import SelectStudent from '../course/selectStudent';
import Bianji from '../course/bianji';

import { ExclamationCircleOutlined } from '@ant-design/icons';

const { Option } = Select;

const { RangePicker } = DatePicker;
const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
};
const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
};

const Course = () => {
  const getData = (data: any) => {
    console.log('我是对面传来的data', data);
    setData(data);
  };

  const getXzxsdata = (xzxsdata: any) => {
    console.log('我是对面传来的xzxsdata', xzxsdata);
    setXzxsdata(xzxsdata);
  };

  //存新增子组件传来的值
  const [Data, setData]: any = React.useState();
  const [Xzxsdata, setXzxsdata]: any = React.useState();

  //新增按钮弹窗
  const [visible, setVisible] = React.useState(false);
  const [confirmLoading, setConfirmLoading] = React.useState(false);
  const [modalText, setModalText] = React.useState('Content of the modal');
  const [courseId, setCourseId] = React.useState();

  const showModal = () => {
    setVisible(true);
  };

  const handleOk = () => {
    //02课程管理 新增按钮接口 缺请求参数
    request
      .post('/courseManage/admin/add/course/project/information', {
        applyDateTime: acdate.applyDateTime, //日期
        classRoom: acdate.classRoom, //教室标识
        name: acdate.name, //课程名称
        outSign: acdate.outSign, //签退时间
        remarks: acdate.remarks, //备注
        responsibility: acdate.responsibility, //责任教师id
        sign: acdate.sign, //签到时间
        total: acdate.total,
        trainingTeachers: acdate.trainingTeachers, //实训老师id
      })
      .then(
        (result: any) => {
          //alert({acdate});
          console.log('课程管理，新增按钮接口result数据', result);
          if (result.success) {
            //获得成功响应返回的数据
            console.log('课程管理，新增按钮接口result.data数据', result.data);
            alert('请求增加课程接口成功');
            //  const data4 = result.data.returnDate.map((item: any) => ({
            //    key: `p_${item.id}`,
            //  }));
          }
        },
        (error) => {
          //错误返回错误信息
          console.log('请求错误');
        },
      );

    setModalText('The modal will be closed after two seconds');
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };

  const { confirm } = Modal;

  function showConfirm() {
    confirm({
      title: '选择学生',
      icon: <ExclamationCircleOutlined />,
      width: 600,
      okText: '确认',
      cancelText: '取消',
      content: (
        <div>
          <p>
            <SelectStudent callback={getSelectStudent} />
          </p>
        </div>
      ),
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  function showConfirmB() {
    confirm({
      title: '编辑',
      icon: <ExclamationCircleOutlined />,
      width: 1000,
      okText: '确认',
      cancelText: '取消',
      content: (
        <div>
          <p>
            <Bianji />
          </p>
        </div>
      ),
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }

  const columns = [
    {
      title: '日期',
      width: 100,
      dataIndex: 'rq',
      key: '1',
      fixed: 'left',
    },
    {
      title: '项目名称',
      width: 100,
      dataIndex: 'xmmc',
      key: '2',
      fixed: 'left',
    },
    {
      title: '实训老师',
      dataIndex: 'sxls',
      key: '3',
      width: 150,
    },
    {
      title: '责任老师',
      dataIndex: 'zrls',
      key: '4',
      width: 150,
    },
    {
      title: '签到时间',
      dataIndex: 'qdsj',
      key: '5',
      width: 150,
    },
    {
      title: '签退时间',
      dataIndex: 'qtsj',
      key: '6',
      width: 150,
    },
    {
      title: '教室',
      dataIndex: 'js',
      key: '7',
      width: 150,
    },
    {
      title: '备注',
      dataIndex: 'bz',
      key: '8',
      width: 150,
    },

    {
      title: '操作',
      key: 'operation',
      fixed: 'right',
      width: 300,
      render: (text: any, record: any) => (
        <Space size="middle">
          <Button type="link" onClick={showConfirm}>
            选择学生
          </Button>

          <Button type="link" onClick={showConfirmB}>
            编辑
          </Button>

          <Button
            type="link"
            onClick={() => {
              console.log('表格设置courseId', record.key);
              setCourseId(record.key); //表格设置Account
              //03下拉框小组名称接口
              console.log('请求数据', record.key);
              const parms = {
                courseId: record.key,
              };
              request
                .post(
                  '/courseManage/admin/delete/course/project/information',
                  parms,
                )
                .then(
                  (result: any) => {
                    console.log('删除成功', record.key);
                    if (result.success) {
                      //获得成功响应返回的数据
                      console.log('删除成功', result.data);
                      alert('删除成功！');
                    }
                  },
                  (error) => {
                    //错误返回错误信息
                    console.log('请求错误');
                  },
                );
            }}
          >
            删除
          </Button>

          <Button type="link" onClick={showConfirm}>
            复制
          </Button>
        </Space>
      ),
    },
  ];

  const data = [];
  for (let i = 0; i < 100; i++) {
    data.push({
      rq: i,
      xmmc: `Edrward ${i}`,
      age: 32,
      address: `London Park no. ${i}`,
    });
  }

  //初始化分页
  const [pagination, setPagination] = React.useState({
    current: 1, //当前页码
    total: 1, //页码总数
    pageSize: 10, //一页多少条数据
    showSizeChanger: true,
    pageSizeOptions: ['10', '50', '200', '500'],
  });

  //改变页码，页码条数接口的事件
  //绑分页接口
  const pageOnChange = (page: any) => {
    const parms = {
      //请求参数
      number: page.pageSize, //一页10行
      page: page.current, //第一页
    };
    //调接口
    //01课程管理遍历查询课程接口
    request.post('/courseManage/Query/course/project/information', parms).then(
      (result: any) => {
        console.log(result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(result.data);

          const data4 = result.data.returnDate.map((item: any) => ({
            key: item.cid,
            rq: item.applyDateTime,
            xmmc: item.name,
            sxls: item.trainingTeachersName,
            zrls: item.responsibilityName,
            qdsj: item.sign,
            qtsj: item.outSign,
            js: item.classRoom,
            bz: item.remarks,
            projectGroupId: item.projectGroupId,
            total: item.tatal,
          }));

          //获取分页请求的数据
          const newPageObject = {
            ...pagination,
            current: parms.page,
            pageSize: parms.number,
            total: result.data.paginationData.sum,
          };

          //放分页的数据
          setPagination(newPageObject);

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  React.useEffect(() => {
    const parms: any = {
      //account: 1,
      //number: 10, //一页10行
      //page: 1, //第一页
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };

    //01课程管理遍历查询课程接口
    request.post('/courseManage/Query/course/project/information', parms).then(
      (result: any) => {
        console.log(result);
        // 这里是响应成功返回的数据，把上面的response打印出来的时候，就会得到以下结果
        // config: {url: "请求的地址"}，这是一个配置文件
        // headers: 请求头信息
        // data: (100) 返回响应的数据
        // request: ajax相关的请求信息
        // status: 200；响应状态
        // statusText: "OK"
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          console.log(result.data);

          const data4 = result.data.returnDate.map((item: any) => ({
            key: item.cid,
            rq: item.applyDateTime,
            xmmc: item.name,
            sxls: item.trainingTeachersName,
            zrls: item.responsibilityName,
            qdsj: item.sign,
            qtsj: item.outSign,
            js: item.classRoom,
            bz: item.remarks,
          }));

          //获取分页请求的数据
          const newPageObject = {
            ...pagination,
            current: parms.page,
            pageSize: parms.number,
            total: result.data.paginationData.sum,
          };

          //放分页的数据
          setPagination(newPageObject);

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    {
      /*
    //02课程管理 新增按钮接口 缺请求参数
    request
    .post('/courseManage/admin/add/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，新增按钮接口result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，新增按钮接口result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
           
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //03课程管理 选择学生超链接 缺请求参数
    request
    .post('/courseManage/admin/insert/students', parms)
    .then(
      (result: any) => {
        console.log("课程管理，选择学生超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，选择学生超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
            
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //04课程管理 编辑超链接 缺请求参数
    request
    .post('/courseManage/admin/Query/update/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，编辑超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，编辑超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //05课程管理 删除超链接 缺请求参数
    request
    .post('/courseManage/admin/delete/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，删除超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，删除超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    //06课程管理 复制超链接 缺请求参数
    request
    .post('/courseManage/admin/clone/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    
    //07课程管理 管理员点击选择学生后，再点击选择分组的请求地址 缺请求参数
    request
    .post('/courseManage/admin/query/all/groups', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );


    //08课程管理 管理员点击选择学生后，再点击选择学生的请求地址 缺请求参数
    request
    .post('/courseManage/admin/query/group/in/all/students', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );

    
    //09课程管理 管理员确认修改课程的请求地址 缺请求参数
    request
    .post('/courseManage/admin/update/course/project/information', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //11课程管理 教师点击查看学生的请求地址 缺请求参数
    request
    .post('/courseManage/teacher/queryStudents', parms)
    .then(
      (result: any) => {
        console.log("课程管理，复制超链接result数据",result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log("课程管理，复制超链接result.data数据",result.data);
          const data4 = result.data.returnDate.map((item: any) => ({
            key: `p_${item.id}`,
          }));

          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );*/
    }

    //12课程管理 责任老师下拉框地址 缺请求参数
    request.post('/common/a_t_s/queryResponsibilityName', parms).then(
      (result: any) => {
        console.log('课程管理，责任老师下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '课程管理，责任老师下拉框地址result.data数据',
            result.data,
          );

          setZrls(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //13课程管理 实训老师下拉框地址 缺请求参数
    request.post('/common/a_t_s/queryTrainingTeacherNames', parms).then(
      (result: any) => {
        console.log('课程管理，实训老师下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '课程管理，实训老师下拉框地址result.data数据',
            result.data,
          );

          setSxls(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //14课程管理 项目名称下拉框地址 缺请求参数
    request.post('/common/a_t_s/queryCourseName', parms).then(
      (result: any) => {
        console.log('课程管理，项目名称下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '课程管理，项目名称下拉框地址result.data数据',
            result.data,
          );
          setXmmc(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  }, []);

  //课程
  const [data4, setData2] = React.useState();
  //下拉框
  const [Zrls, setZrls] = React.useState([{}]);
  const [Sxls, setSxls] = React.useState([{}]);
  const [Xmmc, setXmmc] = React.useState([{}]);

  //获取表单的数据 查询
  const onSubmit = (value: any) => {
    //获取学生
    console.log('查询表单数据', value);
    const parms = {
      ...value,
      //请求参数
      number: pagination.pageSize, //一页10行
      page: pagination.current, //第一页
    };

    //01课程管理遍历查询课程接口
    request.post('/courseManage/Query/course/project/information', parms).then(
      (result: any) => {
        console.log(result);
        // 判断响应状态
        if (result.success) {
          //获得成功响应返回的数据
          console.log(result.data);

          const data4 = result.data.returnDate.map((item: any) => ({
            key: item.cid,
            rq: item.applyDateTime,
            xmmc: item.name,
            sxls: item.trainingTeachersName,
            zrls: item.responsibilityName,
            qdsj: item.sign,
            qtsj: item.outSign,
            js: item.classRoom,
            bz: item.remarks,
          }));

          //获取分页请求的数据
          const newPageObject = {
            ...pagination,
            current: parms.page,
            pageSize: parms.number,
            total: result.data.paginationData.sum,
          };

          //放分页的数据
          setPagination(newPageObject);
          setData2(data4);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  };

  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  const [form] = Form.useForm();
  const onGenderChange = (value: string) => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
        return;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
        return;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
    }
  };

  //子模块数据
  const [acdate, setacdate] = React.useState({});
  //选择学生子模块数据接受
  const [Ssd, setSelectStudent] = React.useState({});

  //获取新增课程传来的参数
  function getValues(value: any) {
    setacdate(value[0]);
    console.log('更改新增参数');
    console.log(acdate);
  }

  function getSelectStudent(value: any) {
    setSelectStudent(value[0]);
    console.log('更改选择学生参数');
    console.log(Ssd);
  }

  //  function addCourse() {
  //    // 02课程管理 新增按钮接口 缺请求参数
  //    console.log('新增按钮');
  //    request
  //      .post('/courseManage/admin/add/course/project/information', {
  //        applyDateTime: acdate.applyDateTime,
  //        classRoom: acdate.classRoom,
  //        name: acdate.name,
  //        outSign: acdate.outSign,
  //        remarks: acdate.remarks,
  //        responsibility: acdate.responsibility,
  //        sign: acdate.sign,
  //        trainingTeachers: acdate.trainingTeachers,
  //      })
  //      .then(
  //        (result: any) => {
  //          console.log('课程管理，新增按钮接口result数据', result);
  //          alert(result.message);
  //        },
  //        (error) => {
  //          //错误返回错误信息
  //          console.log('课程管理，新增按钮接口请求错误');
  //        },
  //      );
  //  }

  return (
    <div>
      <Form onFinish={onSubmit} {...formItemLayout}>
        <div>
          <div style={{ marginLeft: '8px', float: 'left', width: '300px' }}>
            <Form.Item name="applyDateTime" label="日期：">
              <DatePicker />
            </Form.Item>

            <Form.Item name="name" label="项目名称：">
              <Select placeholder="请选择" allowClear>
                {Xmmc.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="trainingTeachersName" label="实训老师：">
              <Select placeholder="请选择" allowClear>
                {Sxls.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="responsibilityName" label="责任老师：">
              <Select placeholder="请选择" allowClear>
                {Zrls.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
            <Form.Item {...tailLayout}>
              <div style={{ float: 'left', width: '50px', marginLeft: '10px' }}>
                <Button type="primary" htmlType="submit">
                  查询
                </Button>
              </div>
            </Form.Item>
          </div>
          <div style={{ marginLeft: '8px', float: 'left', width: '50px' }}>
            <Form.Item {...tailLayout}>
              <div style={{ float: 'left', width: '50px', marginLeft: '30px' }}>
                <Button type="default" htmlType="submit">
                  重置
                </Button>
              </div>
            </Form.Item>
          </div>

          <div style={{ clear: 'left', width: '50px' }}>
            <div style={{ float: 'left', width: '50px', marginLeft: '0px' }}>
              <Form.Item {...tailLayout}>
                <Button type="primary" onClick={showModal}>
                  +新增
                </Button>
                <Modal
                  title="项目名称设置"
                  visible={visible}
                  onOk={handleOk}
                  width={1000}
                  okText={'确认'}
                  cancelText={'取消'}
                  confirmLoading={confirmLoading}
                  onCancel={handleCancel}
                >
                  <p>{<Xinzheng callback={getValues} />}</p>
                </Modal>
              </Form.Item>
            </div>
          </div>
        </div>
      </Form>
      <div>
        <Table
          columns={columns}
          dataSource={data4}
          /*分页组件*/
          pagination={pagination}
          onChange={pageOnChange}
          scroll={{ x: 1500, y: 300 }}
        />
      </div>
    </div>
  );
};

export default Course;
